<template>
    <div class="container-full">

        <!--头部开始-->
        <div class="header" v-for="item in bannerArr" :key="item.id" @click="onClick(item)" v-if="item.place == 'SYS'" style="height: auto;">
            <Coms v-if="item.isCustomStyle == 1 && item.styleLink" :src="item.styleLink"></Coms>
            <img :src="item.imgUrlClient" style="width: 100%;" v-else>
        </div>
        <div style="height: 10px;"></div>
        <!--头部结束-->

        <!--主体开始-->
        <div class="main">

            <Header :bannerArr="bannerArr" :recentUpdate="recentUpdate" :threeDayVideo="threeDayVideo" :zfyObj="zfyObj" :featureVideos="featureVideos"
                    :productId="productId" :week-data="weekData"></Header>

            <!--文章专栏开始-->
            <article-column :article="article"></article-column>
            <!--文章专栏结束-->

            <!--视频专栏开始-->
            <video-column :videos="videos"></video-column>
            <!--视频专栏结束-->


            <!--左侧活动开始-->
            <div class="activity">
                <div class="tip" style="margin-bottom: 10px;" v-if="timetable != '' && timetable != null" @click="onLive(timetable)">
                    <img :src="PIC_URL + '/experience/images/icon18.png'" style="width: 24px;height: 25px;">
                    <div class="tip-com">
                        <div class="title">{{ timetable.channelName }}</div>
                        <div class="text">正在直播中</div>
                    </div>
                </div>

                <div class="refresh" @click="onRefresh">
                    <img :src="PIC_URL + '/experience/images/shaxin.png'" style="width: 51px;height: 89px;margin-bottom: 10px;"/>
                </div>

                <!--左上侧广告开始-->
                <div>
                    <div v-for="item in bannerArr" :key="item.id" @click="onClick(item)" v-if="item.place == 'XF'"
                         :style="{width: item.width,height:item.height}">
                        <Coms v-if="item.isCustomStyle == 1" :src="item.styleLink" :isRatio="false"></Coms>
                        <img :src="item.imgUrlClient" style="width: 100%;" v-else>
                    </div>
                </div>
                <!--左上侧广告结束-->
            </div>
            <!--左侧活动结束-->

            <!--右侧固定导航-->
            <sidebar></sidebar>
            <!--右侧固定导航-->


        </div>
        <!--主体结束-->


        <!--底部开始-->
        <div class="footer" v-for="item in bannerArr" :key="item.id" @click="onClick(item)" v-if="item.place == 'SYX'"
             :style="{width: ratioStyle(item.width),height:ratioStyle(item.height)}">
            <Coms v-if="item.isCustomStyle == 1" :src="item.styleLink" :isRatio="false"></Coms>
            <img :src="item.imgUrlClient" style="width: 100%;" v-else>
        </div>
        <!--底部结束-->

        <!--浮动广告开始-->
        <div class="advertising" v-for="item in bannerArr" :key="item.id" v-if="item.place == 'SYZ' && show" :style="{width: item.width,height:item.height}">
            <i class="el-icon-close" @click="onClose"></i>
            <div>
                <Coms v-if="item.isCustomStyle == 1" :src="item.styleLink" :isRatio="false"></Coms>
                <img :src="item.imgUrlClient" style="width: 100%;" v-else>
            </div>
        </div>
        <!--浮动广告结束-->

        <Popup ref="popup"></Popup>

    </div>
</template>

<script>

import videoColumn from "../component/videoColumn";
import articleColumn from "../component/articleColumn";
import Sidebar from "../component/sidebar";
import Header from "../component/header";
import Coms from "../component/coms/index";

import {queryBetaTestUp, queryBetaTestDown} from "../api/api";
import mixin from "../utils/mixin";

//版本标识  体验版(TY) pro版(PRO) 寻龙版(XL) 擒龙版(QL) 驭龙版(YL) 至尊版(ZZ)
const productMark = 'TY';

export default {
    name: "TY",
    components: {Header, Sidebar, articleColumn, videoColumn, Coms},
    mixins: [mixin],
    data() {
        return {
            bannerArr: [],               //广告
            recentUpdate: [],           //最新更新
            zfyObj: null,                 //战法营
            threeDayVideo: {},         //课程预告
            scjdVideo: {},             //今日市场焦点
            featureVideos: [],         //精选视频
            todayArr: [],              //课程预告（今日）
            article: [],               //文章专栏
            videos: [],                //视频专栏
            tzlnArticle: [],           //投资理念
            timetable: '',             //左侧直播
            productId: '',             //产品ID
            weekData: null,            //本周课表
            centralToken: '',
            show: true
        }
    },
    mounted() {

        //5分钟刷新一次
        /*setInterval(() => {
            if(this.show == false){
                this.onRefresh();
            }
        }, 3000);*/

        let token = this.$route.query.token || '';
        this.centralToken = token;
        this.getClientBannerByPlaces();
        this.getQueryBetaTestDown();

        localStorage.setItem('token', token);
    },
    methods: {
        //首页广告
        async getClientBannerByPlaces() {
            await queryBetaTestUp({productMark, clientCentralToken: this.centralToken}).then(res => {

                let banner = res.data.banner || [];
                banner.sort((a, b) => {
                    return a.sortno - b.sortno
                })
                this.bannerArr = banner;

                this.recentUpdate = res.data.recentUpdate || [];
                this.featureVideos = res.data.featureVideos || [];
                this.zfyObj = res.data.zfy || null;
                this.threeDayVideo = res.data.threeDayVideo || {};
                this.productId = res.data.productId || '';
                this.weekData = res.data.aWeekSchedule;

                this.$nextTick(()=>{
                    setTimeout(()=>{
                        this.$refs.popup.init(banner);
                    },500)
                });

            }).catch((err) => {
                console.log(err);
            });
        },
        //文章信息
        async getQueryBetaTestDown() {
            await queryBetaTestDown({productMark, clientCentralToken: this.centralToken}).then(res => {
                this.article = res.data.article;
                this.videos = res.data.videos;
                this.timetable = res.data.timetable;
            })
        }
    }
}
</script>

<style scoped lang="scss">
@import "../style/style";
</style>
<style lang="scss">
/*::-webkit-scrollbar {
    display: none;
}*/
</style>